<template>
  <div class="container">
    <div class="container-box">
      <div class="left-box">
        <div class="search">
          <el-input v-model="keyword" placeholder="请输入内容" class="search-input"></el-input>
          <el-button type="primary" icon="el-icon-search" class="search-btn" @click="handleSearch">搜索</el-button>
        </div>
        <ul>
          <li class="li-item" v-for="item in pageInfo.list" :key="item.secret.secretid">
            <div class="top">
              <div class="block"><el-avatar shape="square" :size="50" :src="require('../../assets/avator/'+item.avatar)"></el-avatar></div>
              <div style="margin-left: 10px; font-size: large;">
                {{ item.username }}
                -
                <el-tag type="success" >{{ level(item.fishage) }}</el-tag>
                ---
                <el-tag type="info" >{{ item.secret.type }}</el-tag>
                ---
                <el-tag type="success">支持({{ item.secret.agree }})</el-tag>
                ---
                <el-tag type="info">不支持({{ item.secret.disagree }})</el-tag>
              </div>
              <div class="publishtime">{{ item.secret.publishtime }}</div>
            </div>
            <div class="center" style="text-indent: 2em; margin-bottom: 20px;" @click="toDetail(item.secret.secretid,item.userid)">
              {{ item.secret.content }}
            </div>
            <!-- <div class="bottom">
             
            </div> -->
          </li>
        </ul>
        <div class="block1">
          <el-pagination
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNum"
            :page-size="pageInfo.size"
            :page-count = "pageCount"
            >
          </el-pagination>
        </div>
      </div>
      <div class="right-box">
        <Race/>
      </div>
    </div>
  </div>
</template>

<script>
import {GetSecretByPage,SearchSecret,IsLikedSecret,IsDislikeSecret,CancelIsLikedSecret,CancelIsDislikeSecret} from '@/request/api'
import {mapState,mapActions,mapGetters} from 'vuex'
import Race from '@/components/race/race_main.vue'
export default {
  data(){
    return{
      params:{
        pageNum:1,
        keyword:'',
        secretid:null,
      },
      pageInfo:{},
      pageCount:null,
      keyword:'',
      isAgree:false
    }
  },
  components:{
    Race
  },
  computed:{
    ...mapState({
      userDetail:state=>state.userInfo.userDetail
    }),
  },
  methods:{
    ...mapActions({
      asyncChangeIsShowToast:'toaseStatus/asyncChangeIsShowToast'
    }),
    async handleCurrentChange(pageNum){
      this.params.pageNum = pageNum
      let res =await GetSecretByPage(this.params)
      this.pageInfo = res.data.data
      this.pageCount = Math.ceil(this.pageInfo.total/5)
    },
    level(fishage){
      const age = fishage
      if (age < 2) {
              return "钓鱼菜鸟";
            } else if (age < 5) {
              return "钓鱼小白";
            } else if (age < 10) {
              return "钓鱼精英";
            } else if (age < 15) {
              return "钓鱼高手";
            } else {
              return "骨灰级钓手";
            }
    },
    toDetail(id,userid){
      this.$router.push(
        {
          path:'/high/detail',
          query:{
            secretid:id,
            userid:userid
          }
      })
      
    },
    async handleSearch(){
      console.log(this.params.keyword)
      this.params.pageNum = 1
      // 发送搜索的请求
      this.params.keyword = this.keyword
      let res = await SearchSecret(this.params)
      if(res.data.state == 200 ){
        // 查到结果 ， 更新页面数据
        this.pageInfo = res.data.data
        this.pageCount = Math.ceil(this.pageInfo.total/5)
      }else{
        this.asyncChangeIsShowToast({
          type:'success',
          msg:'没有找到相关内容'
        })
      }
      
    },
    // async handleAgree(id){
    //   this.params.secretid = id
    //   if(this.isAgree){
    //     await CancelIsLikedSecret(this.params)
    //     this.isAgree = false
    //   }else{
    //     await IsLikedSecret(this.params)
    //     this.isAgree = true
    //   }
    // }
  },
  async created(){
    // 初始化参数
    let res = await GetSecretByPage(this.params)
    this.pageInfo = res.data.data
    this.pageCount = Math.ceil(this.pageInfo.total/5)
  }
}
</script>

<style scoped>
.container-box{
  display: flex;
  flex-direction: row;
}
.left-box{
  flex: 7;
  border: 1px solid #e3dede;
  border-radius: 4px;
  margin-right: 16px;
  position: relative;
}
.right-box{
  flex: 3;
  border: 1px solid #e3dede;
  border-radius: 4px;
}
ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.li-item{
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid rgb(217,236,255);
  margin-bottom: 10px;
}
.li-item:hover{
  box-shadow: 0 2px 4px rgba(236,245,255);
}
.top{
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.publishtime{
  position: absolute;
  right: 20px;
}
.bottom{
  margin-bottom: 10px;
  margin-top: 20px;
  margin-left: 10px;
  height: 60px;
  line-height: 60px;
}
.center{
  cursor: pointer;
}
.btns{
  font-size: 16px;
}
.block{
  display: flex;
  flex-direction: flex-start;
}
.block1{
 width: 100%;
 margin-top: 10px;
 text-align: center;
}
.search{
  margin-right: 10px;
  text-align: right;
  margin-top: 10px;
}
.search-input{
  width: 120px;
}
.active{
  color: #409EFF;
  border: 1px solid #409EFF;
}
</style>
